<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>layui三级水平导航</title>
		<link rel="stylesheet" href="./layui/css/layui.css" />
		<link rel="stylesheet" href="./index.css" />
		
		<script src="./layui/layui.js"></script>
		<script src="./index.js"></script>
		
	</head>
	<body>
		<div style="display: flex;flex-direction: row;">
			<div id="test" class="nav-container" style="flex-grow: 1;">
			</div>
			<div style="z-index: 10;background: red;">
				<label>你好</label>
			</div>
		</div>
		<div class="layui-tab layui-tab-brief" lay-filter="window" lay-allowClose="true" style="margin: 0;">
		  <ul class="layui-tab-title"></ul>
		  <div class="layui-tab-content" style="height: calc(100vh - 121px);"></div>
			<style>
				[lay-filter="window"] .layui-tab-item { height: 100%; }
			</style>
		</div>
		<script>
			layui.use(['jquery', 'navTab'], function($, navTab) {
				$.getJSON('./api.json', function(menu) {
					navTab({
						selector: '#test', 
						menuTree: menu, 
						clickClose: true, 
						layFilter: 'window', 
						maxOpens: 3
					});
				});
			});
		</script>
	</body>
</html>
